<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<title>Map Example</title>
		<link rel="stylesheet" href="css/mui.css" />
		<script type="text/javascript">
var em=null,map=null;
// H5 plus事件处理
function plusReady(){
	// 确保DOM解析完成
	if(!em||!window.plus||map){return};
	map = new plus.maps.Map("map");
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded事件处理
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	plusReady();
},false);
		</script>
		<style type="text/css">
#map {
	width: 100%;

}
		</style>
	</head>
	<body>
		<ul class="mui-table-view">
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                Item 1
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 2
		            </a>
		        </li>
		        <li class="mui-table-view-cell">
		            <a class="mui-navigate-right">
		                 Item 3
		            </a>
		        </li>
		    </ul>
		  <ul class="mui-table-view mui-grid-view mui-grid-9">
		  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		      <a href="#">
		          <span class="mui-icon mui-icon-home"></span>
		          <div class="mui-media-body">Home</div>
		      </a>
		  </li>
		  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		      <a href="#">
		          <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
		          <div class="mui-media-body">Email</div>
		      </a>
		  </li>
		  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		      <a href="#">
		          <span class="mui-icon mui-icon-chatbubble"></span>
		          <div class="mui-media-body">Chat</div>
		      </a>
		  </li>
		  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		      <a href="#">
		          <span class="mui-icon mui-icon-location"></span>
		          <div class="mui-media-body">Location</div>
		      </a>
		  </li>
		  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		      <a href="#">
		          <span class="mui-icon mui-icon-search"></span>
		          <div class="mui-media-body">Search</div>
		      </a>
		  </li>
		  <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		      <a href="#">
		          <span class="mui-icon mui-icon-phone"></span>
		          <div class="mui-media-body">Phone</div>
		      </a>
		  </li>
		      </ul>
		  
		<div id="map" style="height: 300px;">地图加载中...</div>
	</body>
</html>